<template>
  <view class="meeting-detail">
    <NavBar
      v-if="appInfoStore().isH5"
      title="详情"
      :backgroundColor="'#fff'"
    />
    <view
      class="meeting-detail-contiainer"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="meeting-detail-title">
        <view class="meeting-detail-logo">
          <img
            src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01x470f81S9wNbksEjU_!!1034622205.png"
            alt=""
          />
          <text>交流·合作·用心·共赢</text>
        </view>
        <view class="detail-title-text">
          <text>{{ queryMeetingData?.subject }}</text>
        </view>
        <view class="detail-title-adress-user">
          <text
            ><i class="iconfont icon-address"></i
            >{{ isSchedule ? queryMeetingData?.position : queryMeetingData?.roomNo }}</text
          >
          <nut-divider
            direction="vertical"
            :style="{ color: '#101010', borderColor: '#101010' }"
          />
          <text><i class="iconfont icon-duoren"></i>{{ queryMeetingData?.number }}</text>
        </view>
      </view>
      <view class="meeting-detail-content">
        <view class="detail-content-box">
          <view class="detail-content-box-title">
            <text>{{ isSchedule ? "日程" : "会议" }}详情</text>
          </view>
          <view class="detail-content-box-form">
            <view class="detail-form">
              <view class="detail-form-item item-center">
                <view class="detail-form-item-label">
                  <text>发起人</text>
                </view>
                <view class="detail-form-item-value">
                  <view class="detail-value">
                    <img
                      src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01x470f81S9wNbksEjU_!!1034622205.png"
                      alt=""
                    />
                    <text>{{ queryMeetingData?.promoterName }}</text>
                  </view>
                </view>
              </view>
              <view class="detail-form-item">
                <view class="detail-form-item-label">
                  <text>{{ isSchedule ? "日程" : "会议" }}时间</text>
                </view>
                <view class="detail-form-item-value text-bolck">
                  <text>{{ queryMeetingData?.beginTime }}</text>
                  <text class="prepare-placeholder">即将开始，请做好准备…</text>
                </view>
              </view>
              <view class="detail-form-item">
                <view class="detail-form-item-label">
                  <text>参与成员</text>
                </view>
                <view
                  class="detail-form-item-value border-bottom no-display"
                  @click="handleViewUser"
                >
                  <view class="avatar-box">
                    <view class="avatar-left">
                      <nut-avatar-group
                        max-count="3"
                        zIndex="right"
                        max-content=" "
                        size="small"
                      >
                        <nut-avatar
                          v-for="itm in queryMeetingData?.meetingPlayers"
                          :key="itm"
                          size="small"
                          :url="itm.avatar"
                        >
                          <img
                            :src="itm.avatar"
                            alt=""
                          />
                        </nut-avatar>
                      </nut-avatar-group>
                      <text>名字...共{{ queryMeetingData?.meetingPlayers?.length }}人</text>
                    </view>
                    <i class="iconfont icon-youjiantou1"></i>
                  </view>
                  <view class="meeting-news">
                    <text>{{ queryMeetingData?.attend }}人已收到，{{ queryMeetingData?.attendNo }}人缺席</text>
                  </view>
                </view>
              </view>
              <view class="detail-form-item item-center">
                <view class="detail-form-item-label">
                  <text>附件</text>
                </view>
                <view class="detail-form-item-value">
                  <uploads
                    @files="getFiles"
                    :path="queryMeetingData?.path"
                  >
                  </uploads>
                  <!-- <i class="iconfont icon-youjiantou1"></i> -->
                </view>
              </view>
              <view class="detail-form-item item-center">
                <view class="detail-form-item-label">
                  <text>备注</text>
                </view>
                <view
                  class="detail-form-item-value"
                  @click="handleViewRemark"
                >
                  <text>{{ queryMeetingData?.remark }}</text>
                  <i class="iconfont icon-youjiantou1"></i>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="detail-btn">
        <view class="detail-msg">
          <text>{{ queryMeetingData?.afterMinute }}分钟后 | 即将开始，若因琐事不能按时到达请联系负责人</text>
        </view>
        <view class="detail-btn-box">
          <nut-button
            v-if="!isRefuse"
            type="default"
            @click="goAbsent"
            >缺席的</nut-button
          >
          <nut-button
            color="#1E74FD"
            @click="handleAccept"
            v-if="isParticipants"
          >
            <i
              class="iconfont icon-zhifeiji"
              style="margin-right: 5px; font-size: 16px"
            >
            </i>
            我已接受
          </nut-button>
        </view>
      </view>
      <view class="logo-bottom">
        <img
          class="logo-bottom-img"
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
          alt=""
        />
      </view>
    </view>
    <nut-dialog
      v-model:visible="visible1"
      @cancel="onCancel"
      @ok="onOk"
    >
      <view class="dialog-content">
        <view class="dialog-content-box">
          <view class="dialog-content-item">
            <view class="dialog-title">
              <img
                src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01iGm2xj1S9wNePdVDJ_!!1034622205.png"
                alt=""
              />
              <view class="dialog-title-text">
                <text>因琐事来不了？</text>
                <text>若要缺席会议请说明情况</text>
              </view>
            </view>
            <view class="dialog-content-item-textarea">
              <nut-textarea
                v-model="reason"
                :rows="3"
                limit-show
                max-length="30"
                placeholder="会议缺席说明…"
              />
            </view>
          </view>
        </view>
      </view>
      <template v-slot:footer>
        <view class="dialog-footer">
          <nut-button
            type="default"
            @click="onCancel"
            >取消</nut-button
          >
          <nut-button
            color="#1E74FD"
            @click="onOk"
            >确认缺席</nut-button
          >
        </view>
      </template>
    </nut-dialog>
    <viewPersonPopup
      :isviewPersonPopup="isviewPersonPopup"
      @update:visible="viewVisible"
      :feedbackUsers="selecteduserList"
      :isDetail="true"
    />
    <!-- <nut-dialog class="delete-dialog"
      no-cancel-btn
      title="备注"
      :content="queryMeetingData?.remark"
      v-model:visible="deleteVisible"
      @cancel="onCancel"
    /> -->
    <nut-popup
      position="bottom"
      closeable
      round
      :style="{ padding: '40rpx', boxSizing: 'border-box', height: '30%' }"
      v-model:visible="deleteVisible"
      >{{ queryMeetingData?.remark }}</nut-popup
    >
  </view>
</template>

<script setup lang="ts">
import NavBar from "@/components/navBar/index.vue";
import { onMounted, watch } from "vue";
import { appInfoStore } from "@/stores/appInfo";
import viewPersonPopup from "@/components/viewPersonPopup/index.vue";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
import { queryMeeting, getMeetingChangeStatus } from "@/api/index";
import Taro from "@tarojs/taro";
import { useRouter } from "@tarojs/taro";
const router = useRouter();
import { ref } from "vue";
const visible1 = ref(false);
const deleteVisible = ref(false);
const isSchedule = ref(undefined); // 是否是日程
const queryMeetingData = ref(undefined);
const isviewPersonPopup = ref(false); // 是否显示查看用户弹窗
const selecteduserList = ref([]);
const isParticipants = ref(false); // 是否是参与者
const isRefuse = ref(false); // 是否拒绝
const reason = ref("");
watch(isSchedule, val => {
  let myTitle = "日程详情"; //自定义标题
  if (router.params.isSMType == "1") {
    myTitle = "日程详情";
  } else {
    myTitle = "会议详情";
  }
  Taro.setNavigationBarTitle({
    title: myTitle,
  });
});
onMounted(() => {
  console.log(isSchedule.value, 988898);
  isSchedule.value = router.params.isSMType == "1" ? true : false;
  getQueryMeeting();
});
// 查看备注
const handleViewRemark = () => {
  deleteVisible.value = true;
};
const viewVisible = (val: boolean) => {
  isviewPersonPopup.value = val;
};
const handleAccept = () => {
  let params = {
    meetingId: router.params.id,
    status: 1,
  };
  getMeetingChangeStatus(params).then(res => {
    Taro.showToast({
      title: "确认接受成功",
      icon: "none",
    });
    getQueryMeeting();
  });
};
const handleViewUser = () => {
  isviewPersonPopup.value = true;
};
const getFiles = async (files: any) => {
  queryMeetingData.value.path = files;
};
const getQueryMeeting = async () => {
  selecteduserList.value = [];
  queryMeeting(router.params.id).then(res => {
    queryMeetingData.value = res.data;
    // selecteduserList.value = res.data.path;
    res.data.meetingPlayers.forEach((item: any) => {
      selecteduserList.value.push({
        ...item,
        avatarUrls: item.avatar,
        nickName: item.userName,
        userId: item.userId,
      });
    });
    isParticipants.value = res.data.meetingPlayers.some(
      (item: any) => item.userId == Taro.getStorageSync("user").userId && item.takePart == 0,
    );
    isRefuse.value = res.data.meetingPlayers.some(
      (item: any) => item.userId == Taro.getStorageSync("user").userId && item.takePart == 2, //2是拒绝
    );
  });
};
const goAbsent = () => {
  visible1.value = true;
};
const onCancel = () => {
  visible1.value = false;
  deleteVisible.value = false;
};
const onOk = () => {
  let params = {
    meetingId: router.params.id,
    status: 2,
    reason: reason.value,
  };
  getMeetingChangeStatus(params).then(res => {
    visible1.value = false;
    Taro.showToast({
      title: "确认缺席成功",
      icon: "none",
    });
    getQueryMeeting();
  });
};
</script>

<style lang="less">
@import "./index.less";
// @import url("../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
